PrestaShop-Banner

PrestaShop Banner CC Dokumentation

Umfassende Dokumentation für das Banner-Management-Modul für PrestaShop (cc_ps_banner) mit umfangreichen Konfigurationsmöglichkeiten und vorgefertigten Templates.

Inhaltsübersicht

1. Einführung
2. Einrichtung
3. Aktivierung der Lizenz
4. Management-Panel
5. Banner-Verwaltung
6. Hintergrund-Konfiguration
7. Video-Konfiguration
8. Inhaltliche Voreinstellungen
9. Overlay-Konfiguration
10. Einstellungen der Animation
11. Zeitplan anzeigen
12. Verwendung des Moduls in Vorlagen
13. Lösung von Problemen
14. FAQ

1. Einleitung

CC PrestaShop Banner ist ein fortschrittliches Modul zur Erstellung und Verwaltung von Bannern in PrestaShop-Shops. Das Modul bietet eine intuitive Schnittstelle, die es Ihnen ermöglicht, attraktive Banner mit vorgefertigten Vorlagen zu erstellen, ohne die Notwendigkeit für Kenntnisse in HTML und CSS.

Das Modul bietet:

• Neun vordefinierte Voreinstellungen für Bannerinhalte
• Verschiedene Hintergrundtypen: Video, Foto oder Farbe
• Integration mit YouTube, Vimeo und die Möglichkeit, eigene Videos hochzuladen
• Farbiges oder grafisches Overlay
• Eingangsanimationseffekte
• Zeitplan anzeigen (von-bis)
• Möglichkeit der Platzierung des Banners in verschiedenen Bereichen des Shops
• Unterstützung von mehreren Bannern gleichzeitig

2. Einbau

Systemanforderungen

• PrestaShop 1.7 oder höher
• PHP 7.0 oder höher
• Erlaubnis zur Installation von Modulen

Einbauverfahren

1. Laden Sie die ZIP-Datei des Moduls aus dem offiziellen Shop herunter cocos.codes
2. Loggen Sie sich in das PrestaShop-Administrationspanel ein
3. Gehen Sie zu: Module > Modulmanager > Neues Modul hinzufügen
4. Klicken Sie auf "Modul hinzufügen" und wählen Sie die heruntergeladene ZIP-Datei aus.
5. Wenn die Installation abgeschlossen ist, klicken Sie auf "Konfigurieren".

3. die Aktivierung der Lizenz

Bevor die volle Funktionalität des Moduls genutzt werden kann, ist es notwendig, die Lizenz zu aktivieren:

1. Nach der Installation fahren Sie mit der Modulkonfiguration fort
2. Wählen Sie die Registerkarte "Lizenz".
3. Geben Sie den nach dem Kauf erhaltenen Lizenzschlüssel ein
4. Klicken Sie auf "Lizenz aktivieren".
5. Nach erfolgreicher Aktivierung erhalten Sie eine Bestätigungsmeldung und alle Funktionen des Moduls sind freigeschaltet.

4 Management-Panel

Die Verwaltungsoberfläche des Moduls besteht aus mehreren Registerkarten, die eine vollständige Konfiguration ermöglichen:

Hauptregisterkarten:

• Banner-Verwaltung - Hinzufügen, Bearbeiten und Löschen von Bannern
• Dokumentation - Link zur Online-Dokumentation
• Unterstützung - Link zur Support-Seite
• Plug-ins - zusätzliche Erweiterungen für das Modul
• Lizenz - Modul Lizenzmanagement

Wenn Sie auf die Registerkarte "Banner verwalten" gehen, sehen Sie eine Liste aller Banner, die Sie erstellt haben, mit der Möglichkeit, sie zu bearbeiten, zu löschen und ihren Aktivitätsstatus zu ändern.

5. die Verwaltung von Bannern

Auf der Registerkarte "Bannerverwaltung" können Sie Banner erstellen, bearbeiten und löschen:

Liste von Bannern

• Banner-ID
• Name
• Haken (Ort der Anzeige)
• Voreinstellung (Inhaltsvorlage)
• Hintergrund Typ
• Video-Typ
• Status der Aktivität
• Position
• Datum der Erstellung
• Verfügbare Aktionen (Bearbeiten, Löschen)

Hinzufügen und Bearbeiten von Bannern

1. Klicken Sie auf die Schaltfläche "Neu hinzufügen" oder "Bearbeiten" neben einem vorhandenen Banner
2. Füllen Sie das Formular mit den Bannerdaten aus, das in verschiedene Abschnitte unterteilt ist:
   • Grundlegende Daten - Name, Aktivitätsstatus
   • Anzeige - Haken, Abmessungen, abgerundete Ecken, Position
   • Hintergrund Typ - Auswahl des Hintergrundtyps (Video, Foto, Farbe)
   • Video-Konfiguration - Video-Player-Einstellungen
   • Inhalt voreingestellt - Auswahl einer vorgefertigten Vorlage und deren Konfiguration
   • Überlagerung - Konfiguration der Überlagerungsschicht
   • Animationen - Effekte des Bannereintrags
   • Zeitplan anzeigen - Einstellung der Dauer der Banneraktivität
3. Klicken Sie auf "Speichern", um die Änderungen zu speichern.

6. die Hintergrundkonfiguration

Das Modul bietet drei verschiedene Arten von Bannerhintergründen:

Farbe

• Wählen Sie "Farbe" als Hintergrundtyp
• Verwenden Sie den Farbwähler, um die gewünschte Hintergrundfarbe auszuwählen.
• Sie können den Farbwert im HEX- (#RRGGBB) oder RGBA-Format eingeben.

Foto

• Wählen Sie "Foto" als Hintergrundtyp
• Laden Sie das Bild über die Schaltfläche "Durchsuchen" hoch.
• Unterstützte Formate: JPG, PNG, GIF (maximal 15MB)
• Wenn Sie ein neues Bild hochladen, wird das aktuelle Bild ersetzt, wenn Sie das Feld leer lassen, bleibt das vorhandene Bild erhalten.

Video

• Wählen Sie "Video" als Hintergrundtyp
• Konfigurieren Sie die übrigen Videoeinstellungen im Abschnitt "Videokonfiguration" (im nächsten Kapitel beschrieben)

7. die Video-Konfiguration

Das Modul ermöglicht die Verwendung von Videos als Bannerhintergrund. Es stehen verschiedene Videoquellen zur Verfügung:

Video-Typen

• Kein Video - wird verwendet, wenn ein anderer Hintergrundtyp als Video ausgewählt wird
• YouTube - Einbetten eines YouTube-Videos
• Vimeo - Einbetten eines Videos von Vimeo
• URL direkt - Link zu einer Videodatei, die auf einem externen Server gehostet wird
• Videodatei (hochladen) - Hochladen Ihrer eigenen Videodatei

Einstellungen für die Wiedergabe

• Automatische Wiedergabe - startet die Wiedergabe automatisch, wenn die Seite geladen wird
• Zum Schweigen gebracht - Video ohne Ton abgespielt (empfohlen für Autoplay)
• Schleife - automatische Videowiederholung bei Videoende
• Steuerelemente anzeigen - zeigt benutzerdefinierte Steuertasten an (Wiedergabe/Pause, Stummschaltung/Ton)

Ihr eigenes Video hochladen

• Wählen Sie den Videotyp "Videodatei (Upload)".
• Laden Sie die Datei über die Schaltfläche "Durchsuchen" hoch.
• Unterstützte Formate: MP4, WebM, AVI, MOV (maximal 50MB)

8 Inhaltsvorgaben

Das Modul bietet neun vorgefertigte Inhaltsvorgaben (Templates), die ausgewählt und individuell angepasst werden können:

Verfügbare Voreinstellungen

• Ohne Voreinstellung (nur Video) - zeigt nur den Hintergrund ohne zusätzlichen Inhalt an
• Voreinstellung 1 (zentraler Titel mit Taste) - großer zentraler Titel, Untertitel und CTA-Schaltfläche
• Voreinstellung 2 (Text linksbündig) - der Inhalt wird links vom Banner ausgerichtet
• Voreinstellung 3 (Dreispaltiges Layout) - Inhalt in drei Spalten unterteilt
• Voreinstellung 4 (in zwei Spalten aufgeteilt) - Inhalt in zwei Spalten unterteilt
• Voreinstellung 5 (Vollbild mit Unschärfe) - Vollbild-Effekt mit großem zentralen Titel
• Voreinstellung 6 (Kopfzeile mit Statistik) - Kopfzeile am oberen Rand und drei Spalten mit Daten am unteren Rand
• Voreinstellung 7 (Liste der Funktionen mit CTA) - Titel und Liste der Funktionen, die mit einer CTA-Schaltfläche endet
• Voreinstellung 8 (Kopfzeile und zwei Spalten) - Bewerbungslayout herunterladen
• Voreinstellung 9 (Kopfzeile und zwei Spalten zentriert, vergrößert) - Event-Promotion-Layout

Inhaltselemente für die Konfiguration

• Haupttitel - Banner-Kopfzeile
• Untertitel - zusätzlicher Text unter dem Haupttitel
• Text der Schaltfläche - den auf der CTA-Schaltfläche angezeigten Inhalt
• Schaltfläche Link - Ziel-URL, wenn die Schaltfläche angeklickt wird
• Textfarbe der Schaltfläche - Schriftfarbe der Schaltflächen
• Hintergrundfarbe der Schaltfläche - Hintergrundfarbe der Schaltfläche
• Text 1, 2, 3 - zusätzliche Textfelder, die in verschiedenen Voreinstellungen verwendet werden
• Benutzerdefiniertes CSS - zusätzliche CSS-Stile für das Banner

9. Konfiguration des Overlays

Ein Overlay ist eine Ebene, die über dem Hintergrund eines Banners angezeigt wird und dazu beitragen kann, die Lesbarkeit von Text zu verbessern oder einen Smokey-Effekt zu erzeugen:

Overlay-Typen

• Kein Overlay - keine zusätzliche Ebene über dem Hintergrund
• Farbe - farbige Ebene mit einstellbarer Transparenz
• Bild - grafische Überlagerung (z. B. Farbverlauf, Muster, Textur)

Einstellungen für Farbüberlagerungen

• Farbe der Überlagerung - Farbwähler (unterstützt HEX- und RGBA-Formate)
• Transparenz - Wert von 0,0 (völlig transparent) bis 1,0 (undurchsichtig)

Einstellungen für Bildüberlagerungen

• Overlay-Bild - Hochladen eines Bildes über die Schaltfläche "Durchsuchen
• Transparenz - Intensitätsanpassung des bildgebenden Overlays

10. Animationseinstellungen

Das Modul bietet mehrere Animationseffekte, die beim Laden des Banners angewendet werden:

Eingabe-Animation

• Ohne Animation - das Banner erscheint sofort
• Glattes Aussehen - das Banner wird allmählich sichtbar (Einblendeffekt)
• Eingang von links - das Banner kommt von der linken Seite des Bildschirms
• Eingang von rechts - der Banner kommt von der rechten Seite des Bildschirms
• Eingang von unten - das Banner kommt vom unteren Rand des Bildschirms
• Vergrößerung - das Banner erscheint mit einem Zoom-Effekt in der Mitte
• Rückprallen - das Banner erscheint mit einem Bounce-Effekt

Animation Zeit

• Wert in Millisekunden (von 100 bis 10000)
• Standardwert ist 1000ms (1 Sekunde)
• Kürzere Zeit = schnellere Animation
• Längere Zeit = langsamere, flüssigere Animation

11. Zeitplan anzeigen

Mit der Zeitplanfunktion können die Banner automatisch zu einer bestimmten Zeit ein- und ausgeschaltet werden:

Zeitplan-Einstellungen

• Zeitplan freigeben - Aktivierung der Funktion der zeitgesteuerten Anzeige
• Datum des Beginns - Datum und Uhrzeit, ab der das Banner angezeigt werden soll
• Datum der Fertigstellung - Datum und Uhrzeit, bis zu der das Banner angezeigt werden soll

Beispiele für die Verwendung

• Zeitlich begrenzte Werbebanner (z. B. Black Friday, saisonale Verkäufe)
• Informationen über bevorstehende Veranstaltungen
• Wechsel der Banner je nach Tageszeit (andere Banner am Morgen, andere am Abend)
• Regelmäßige Bekanntmachungen an die Kunden

12. Verwendung des Moduls in den Vorlagen

Die Banner werden automatisch an den von den ausgewählten Wasserpfeifen angegebenen Stellen angezeigt. Verfügbare Anschlüsse sind:

Hauptstandorte

• displayHome - Hauptinhalt der Homepage
• displayTop - oberer Bereich der Seite (über der Kopfzeile)
• displayNav1 - erste Navigationsleiste (über dem Logo/Shop)
• displayNav2 - zweite Navigationsleiste (oft unterhalb des Logos)
• displayNavFullWidth - vollständige Navigation (z. B. Megadropdown-Menü)
• displayBanner - Werbebanner über der Kopfzeile
• displayFooter - Hauptinhalt der Fußzeile
• displayFooterBefore - Abschnitt vor der Fußzeile (z. B. zusätzliche Links)
• displayFooterAfter - Abschnitt nach der Fußzeile (z. B. Haftungsausschlüsse, Skripte)
• displayLeftColumn - linke Spalte der Seite
• displayRightColumn - rechte Spalte der Seite
• displayWrapperTop - oben auf der Hauptseite Container
• displayWrapperBottom - unterer Teil des Containers der Hauptseite
• displayContentWrapperTop - Anfang des Hauptinhalts
• displayContentWrapperBottom - unterer Teil des Hauptinhalts
• displayBeforeBodyClosingTag - unmittelbar vor dem Schließen des Tags <body> (oft auf Drehbüchern)

Produkt Seitenanschlüsse

• displayProductAdditionalInfo - zusätzliche Informationen auf der Produktseite
• displayProductListReviews - Produktbewertungen in der Listenansicht (z.B. Sterne)
• displayReassurance - Block mit Garantien/Vertrauen
• displayAfterProductThumbs - Artikel nach Produktbild-Miniaturansichten

Korb- und Bestellanschlüsse

• displayShoppingCart - Inhalt der Seite mit dem Einkaufswagen
• displayShoppingCartFooter - Ergänzungen in der Fußzeile des Warenkorbs (z. B. CTA-Buttons)
• displayBeforeCarrier - Abschnitt, bevor Sie die Liefermethode wählen
• displayAfterCarrier - Abschnitt nach Auswahl der Liefermethode
• displayOrderConfirmation - Auftragsbestätigung

Kundenkontoanschlüsse

• displayCustomerAccount - Kundeninhalte (z.B. Links, Module)
• displayMyAccountBlock - Block "Mein Konto" (normalerweise in der Kopfzeile oder in der Seitenspalte)

13 Fehlersuche

Banner wird nicht angezeigt

1. Prüfen Sie, ob das Banner aktiv ist (Status "Aktiv" in der Bannerliste)
2. Sicherstellen, dass die Lizenz aktiv ist
3. Prüfen, ob der Haken, dem das Banner zugewiesen wurde, in der aktuellen Vorlage vorhanden ist
4. Wenn ein Zeitplan aktiviert ist, vergewissern Sie sich, dass das aktuelle Datum in dessen Bereich fällt
5. PrestaShop und Browser-Cache löschen

Video wird nicht automatisch abgespielt

1. Stellen Sie sicher, dass die Option "Automatische Wiedergabe" aktiviert ist.
2. Prüfen Sie, ob das Video stummgeschaltet ist (Browser blockieren die automatische Wiedergabe von Videos mit Ton)
3. Prüfen Sie, ob die Video-URL korrekt ist (für YouTube und Vimeo)
4. Prüfen Sie, ob die Videodatei korrekt hochgeladen wurde (im Falle Ihrer eigenen Datei)

Anzeigeprobleme auf mobilen Geräten

1. Passen Sie die Abmessungen des Banners an, um es reaktionsfähig zu machen (z. B. Breite: 100%)
2. Verkleinern Sie die Größe des hochgeladenen Videos oder Fotos für eine bessere Leistung
3. Passen Sie die Textmenge an - auf kleinen Bildschirmen kann zu viel Text unleserlich sein

14. HÄUFIG GESTELLTE FRAGEN (FAQ)

Kann ich mehr als ein Banner am selben Ort haben (Hookup)?
Ja, das Modul erlaubt die Zuweisung mehrerer Banner an denselben Anschluss. Die Banner werden entsprechend der eingestellten Position angezeigt (vom niedrigsten zum höchsten Wert).

Kann ich das gleiche Banner in verschiedenen Bereichen des Shops verwenden?
Derzeit kann ein Banner nur einer Wasserpfeife zugewiesen werden. Wenn Sie dasselbe Banner an verschiedenen Orten anzeigen möchten, müssen Sie eine Kopie des Banners erstellen und sie einer anderen Wasserpfeife zuweisen.

Wie groß kann ich Videodateien hochladen?
Das Modul erlaubt das Hochladen von Videodateien mit einer maximalen Größe von 50 MB. Für eine optimale Leistung empfehlen wir jedoch, das Video auf das notwendige Minimum zu komprimieren und das MP4-Format mit dem Codec H.264 zu verwenden.

Sind die Banner ansprechbar?
Ja, Banner passen sich an die Breite des Containers an, in dem sie angezeigt werden. Um die volle Reaktionsfähigkeit zu gewährleisten, empfehlen wir, die Breite auf 100% und eine entsprechende Höhe einzustellen (Sie können vh-Einheiten für höhenabhängige Bildschirm).

Kann ich das Formular in ein Banner einbetten?
Das Modul in der Standardversion unterstützt keine Formulare direkt. Wenn Sie ein Formular in ein Banner einfügen möchten, können Sie benutzerdefinierten HTML-Code in den Textfeldern verwenden, aber die Funktionalität des Formulars hängt von der Vorlage Ihres Shops ab.

Wie oft wird das Modul aktualisiert?
Das Modul wird regelmäßig aktualisiert, um die Kompatibilität mit den neuesten Versionen von PrestaShop zu gewährleisten und um neue Funktionen einzuführen. Inhaber einer gültigen Lizenz haben Zugang zu allen Updates.

Kann ich die Lizenz auf ein anderes Geschäft übertragen?
Die Lizenz ist einer Domain zugeordnet. Wenn Sie Ihre Shop-Domain wechseln, kontaktieren Sie bitte den COCOS-Support, um die Lizenz zu übertragen.

Beeinträchtigt das Modul die Leistung des Geschäfts?
Das Modul wurde auf Leistung optimiert. Große Video- oder Bilddateien können sich am stärksten auf die Ladegeschwindigkeit auswirken. Wir empfehlen, Mediendateien zu optimieren, bevor Sie sie in Bannern verwenden.